<template>
    <div class="d-flex justify-content-between">
        <el-button-group>
            <el-button type="primary" size="mini" @click="onClickToolbar('create')">新增</el-button>
            <el-button type="danger" size="mini" @click="onClickToolbar('delete-multi')">删除</el-button>
            <el-button v-show="editMultiVisible" type="info" size="mini" @click="onClickToolbar('edit-multi')">修改
            </el-button>
            <el-button v-show="copyMultiVisible" type="info" size="mini" @click="onClickToolbar('copy-multi')">复制
            </el-button>
        </el-button-group>
        <el-button-group>
            <el-button type="info" size="mini" :loading="loadingOfRefresh" @click="onClickToolbar('refresh')">刷新
            </el-button>
            <el-button v-show="importVisible" type="info" size="mini" @click="onClickToolbar('import')">导入</el-button>
            <el-button v-show="exportVisible" type="info" size="mini" @click="onClickToolbar('export')">导出</el-button>
            <el-button type="info" size="mini" @click="onClickToolbar('print')">
                打印
            </el-button>
            <el-button type="info" size="mini" @click="onClickToolbar('fullscreen')">全屏</el-button>
            <el-dropdown :hide-on-click="false">
                <el-button type="info" size="mini">
                    列<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, idx) of columns" :key="idx">
                        <el-checkbox v-model="item.visible" :label="item.title" @change="onChangeVisible()">
                        </el-checkbox>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-button-group>
        <!-- 导入excel弹窗 -->
        <excel-upload-dialog :visible="false" title="导入数据" @uploaded="onUpload"></excel-upload-dialog>
    </div>
</template>

<script>
import ExcelUploadDialog from "@/components/UploadDialog/ExcelUploadDialog.vue";
/**
 * 数据表工具栏组件
 */
export default {
    name: 'TableToolbar',
    components: { ExcelUploadDialog },
    emits: ['click'],
    props: {
        titleOfPrint: {
            type: String,
            default: '页面标题',
        },
        loadingOfRefresh: {
            type: Boolean,
            default: false,
        },
        columns: {
            type: Object,
            default() {
                return {};
            }
        },
        editMultiVisible: {
            type: Boolean,
            default: false,
        },
        copyMultiVisible: {
            type: Boolean,
            default: false
        },
        importVisible: {
            type: Boolean,
            default: false
        },
        exportVisible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visibleOfUploadDialog: false,
        }
    },
    methods: {
        onChangeVisible() {
            this.$emit(`update:columns`, this.columns);
        },
        onClickToolbar(name, item) {
            console.log("[TableToolbar.onClickToolbar] ", name, item);
            switch (name) {
                case "create":
                    // console.log('点击按钮 工具栏 - 新增');
                    break;
                case "edit-multi":
                    // console.log('点击按钮 工具栏 - 批量编辑');
                    break;
                case "copy-multi":
                    // console.log('点击按钮 工具栏 - 批量复制');
                    break;
                case "delete-multi":
                    // console.log('点击按钮 工具栏 - 批量删除');
                    break;
                case "import":
                    console.log('点击按钮 工具栏 - 导入');
                    this.visibleOfUploadDialog = true;
                    console.log("visibleOfUploadDialog", this.visibleOfUploadDialog);
                    break;
                case "export":
                    // console.log('点击按钮 工具栏 - 导出');
                    break;
                case "refresh":
                    // console.log('点击按钮 工具栏 - 刷新');
                    // this.$emit('update:loadingOfRefresh',true);
                    // this.loadData();
                    break;
                case "fullscreen":
                    console.log('点击按钮 工具栏 - 全屏');
                    // 显示器全屏
                    if (document.fullscreenElement) {
                        document.exitFullscreen();
                    } else {
                        document.getElementById("tableCard").requestFullscreen();
                    }
                    break;
                case "print":
                    console.log('点击按钮 工具栏 - 打印');
                    // document.title = document.querySelector("h4").innerText;
                    document.title = this.titleOfPrint;
                    window.print();
                    break;
                default:
                    break;
            }
            this.$emit('click', name, item);
        },
        // 导入文件操作
        onUpload(success, ret) {
            if (!success) {
                this.$message.error(ret.message);
                return;
            }
            console.log("上传成功 ", ret);
        },
    }
}
</script>

<style>
</style>